use std::{collections::HashMap, fmt::format};
use crate::*;
use leptos::leptos_dom::ev::SubmitEvent;
use leptos::logging;
use leptos::*;
use serde::ser;
use serde::{Deserialize, Serialize};
use serde_json::*;

/*
 *  echarts的使用案例
 * 
https://echarts.apache.org/examples/zh/index.html
download：https://github.com/apache/echarts/releases

特别注意：
  -   let js_src="/site/js/echarts.js"; 在App中的加载：    
    view! {
        <Stylesheet id="leptos" href={css_link} />      
        <Script src={js_src} />

  -  <Script> js_cdoe</Script> 

*/

/*
let js_cdoe_src = r#"
var chartDom = document.getElementById('chart-id');
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};
myChart.setOption(option);
"#;
*/

#[component]
pub fn MyChartPage() -> impl IntoView {

let js_cdoe_s1 = r#"
var chartDom = document.getElementById('chart-id');
var myChart = echarts.init(chartDom);
var option;

option = "#;

let js_cdoe_s2 = r#"
;
myChart.setOption(option);
"#;

let xa = ChartXxis {
  r#type: "category".to_string(),
  data: vec!["Mon".to_string(), "Tue".to_string(), "Wed".to_string(), "Thu".to_string(), "Fri".to_string(), "Sat".to_string(), "Sun".to_string()],
};

let ya = ChartYxis {
  r#type: "value".to_string(),
 };

let ser = ChartSeries {
  r#type: "line".to_string(),
  data: vec![150, 230, 224, 218, 135, 147, 260],
};

let option = ChartOption {
  series: ser,
  xAxis: xa,
  yAxis: ya,
};

let src = serde_json::to_string(&option).unwrap();   
logging::log!("{}", src);

let mut js_code = js_cdoe_s1.to_string();
js_code.push_str( &src );
js_code.push_str(js_cdoe_s2);


    let js_view = view! {
        <script>{js_code}</script>
    };   

    view! {
        // color is option
        <div align="center" id="js_test">
        </div>
       
        <div id="chart-id" style="width: 600px;height:400px;" ></div>         
        {js_view}   
    }
}
#[derive(Debug, Serialize, Deserialize)]
struct ChartOption {
    series: ChartSeries,
    xAxis: ChartXxis,
    yAxis: ChartYxis,
}
#[derive(Debug, Serialize, Deserialize)]
struct ChartSeries {
  r#type: String,
  data: Vec<i32>,  
}
#[derive(Debug, Serialize, Deserialize)]
struct ChartXxis {
  r#type: String,
  data: Vec<String>,  
}
#[derive(Debug, Serialize, Deserialize)]
struct ChartYxis {
  r#type: String, 
}

